<template>
  <div style="height:100%;overflow-y:auto;">
    <div class="query">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="专家邮箱">
          <el-input type="email" v-model="search.email" placeholder="专家邮箱"></el-input>
        </el-form-item>
        <el-form-item label="专家昵称">
          <el-input type="text" v-model="search.nickname" placeholder="专家昵称"></el-input>
        </el-form-item>
        <el-form-item label="素材状态">
          <el-select v-model="search.type" placeholder="素材状态">
            <el-option label="全部" :value="'all'"></el-option>
            <el-option label="已发布" :value="3"></el-option>
            <el-option label="正在编辑" :value="2"></el-option>
            <el-option label="未发布" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadMateList(true)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div v-for="item in mateList" :key="item.objid" @click="addDelete(item)" style="display:inline-block;width: 300px;vertical-align: top;padding:5px 5px;margin:5px 5px;border:1px solid #eee;">
        <el-image style="width:300px" :src="item.url" :preview-src-list="srcList">
        </el-image>
        <div style="padding:5px 10px;">
        <span>发布人：{{item.nickname}}</span><br>
        <span>发布人邮箱：{{item.email}}</span><br>
        <span>状态：{{item.status == 1? "未发布" : item.status == 2 ? "正在编辑" : "已发布"}}</span><br>
        <span>创建时间：{{item.ctime}}</span>
        <el-button type="danger" size="mini" @click="deleteMate(item.objid)">删除</el-button>
        </div>
      </div>
    </div>
    <el-pagination :current-page="search.page" :page-size="search.limit"  @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" style="margin-top:10px;">
    </el-pagination>
  </div>
</template>

<script>
import { getMateList,deleteMaterial } from "@/api/admin/mate"
export default {
  data() {
    return {
      mateList: [],
      srcList: [],
      search: {
        nickname: '',
        email: '',
        type: 'all',
        page:1,
        limit:10
      },
      choosedMate:[],
      total:0
    }
  },
  created() {
    this.loadMateList();
  },
  methods: {
    loadMateList(clearpage=false) {
      if(clearpage){
        this.search.page = 1
      }
      getMateList(this.search, (res) => {
        if (res.code == 200) {
          this.mateList = res.data
          this.total = res.count
          this.srcList = res.data.map(item => item.url)
          // this.mateList.push(...res.data)
        }
      })
    },
    handleCurrentChange(val){
      this.search.page = val
      this.loadMateList()
    },
    deleteMate(objid){
      this.$confirm('此操作将删除原素材，并且基于该原素材的发布的编辑信息也将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMaterial({ objid: objid }, (res) => {
          if (res.code == 200) {
            this.mateList = this.mateList.filter(item => item.objid != objid)
            this.srcList = this.mateList.map(item => item.url)
          }
        }, true)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style lang="less" scoped>
</style>